<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
			<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
			<script src="../运动框架.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			body{
				margin: 0px;
				padding: 0px;
				background-color:burlywood ;
			}
			.bg-img{
				
				background-repeat:no-repeat ;
				background-image:url(img/minibar.png);
			}
			.dw{
				width: 100%;
				height: auto;
				position: absolute;
				right: 0;
				bottom: 0;
			}
			.btn{
				position: absolute;
				right: 0px;
				width: 33px;
				height: 50px;
				background-repeat:no-repeat ;
				background-image:url(img/minibar.png) ;
				background-position:-265px 0px ;
				
			}
			.dw.btn:hover{
				background-position:-237px 0px ;
			}
			.btn_onclick{
				background-position:-204px 0px;
			}
			.btn_onclick:hover{
				background-position:-171px 0px;
			}
			.wz1{
				    overflow: hidden;
    z-index: -1;
    width: 0px;
    height: 51px;
    right: 32px;
    background-position: 0px 0px;
			}
			.wz1>span{
				
				font-size: 10px;
				left: 10px;
			}
			.wz2>ul{
				margin: 0px;
				padding: 0px;
				list-style: none;
				position: absolute;
				right: 200px;
				top: -50px;
			}
			.ww{
				font:12px/1.25 tahoma,arial,宋体,sans-serif;
				border-bottom: 1px solid #080808;
				display: flex;
  				  justify-content: space-between;
    				line-height: 42px;
    				width: 205px;
   				 height: 39px;
   				list-style: none;
   				 background-color: #101010;
				
				
			}
			.wz3{
				margin-top: 15px;
				overflow: hidden;
				width: 33px;
				height: 15px;
				display: inline-block;
				background-position:18px -73px;
			}
			.wz4{
				box-shadow: #000000 3px,3px,3px;
				margin: 0px;
				padding: 0px;
				overflow: hidden;
				position: absolute;
				background-position:-1px -280px;
				width: 33px;
				height: 300px;
				background-color:#101010;
				border-right:1px solid #080808 ;
			}
			.wz4>li{
				text-align: center;
				line-height: 30px;
				font-size: 10px;
			}
			.wz4>li:hover{
				color: chartreuse;
			}
			.wz5{
				height: 300px;
				background-color:#101010 ;
				font:12px/1.25 tahoma,arial,宋体,sans-serif;
				color:white;
				
			}
			#gd{
				z-index: -1;
				height: 0px;
				overflow: hidden;
				width:201px;
			
			}
			.wz1>ul{
				position: relative;
				top: -10px;
				left: 5px;
				z-index: 100;
			}
			.wz1>ul>li{
				
				background-image:url(../js-demo/JS运动中级/记录/土豆右下角菜单悬浮效果/minibar.png) ;
				width: 17px;
				height: 17px;
					display: inline-block;
				border-radius:17px ;
				color: white;
				background-position:-3px -54px;
				opacity: 0;
			}
			.wz1>ul>li:nth-child(2){
				background-position:-29px -51px ;
			}
			.wz1>ul>li:nth-child(3){
				background-position:-53px -53px ;
			}
			.wz1>ul>li:nth-child(4){
				background-position:-76px -50px ;
			}
			.wz1>ul>li:nth-child(5){
				background-position:-100px -50px ;
			}
			.wz1>ul>li:hover{
				opacity: 1;
				
			}
			
		</style>
		<script type="text/javascript">
			var btn;
			var btn2;
			var wz1;
			var gd;
			window.onload=function(){
				btn =document.getElementById('btn');
				btn2 =document.getElementById('btn2');
				wz1 =document.getElementById('wz1');
				gd=document.getElementById('gd');
				 btn.onclick=function(){
				 	console.log('1');
				 	$('#btn').addClass('btn_onclick');
				 	move(wz1,{width: 170},function(){
				 		move(gd,{height:350})
				 	});
				 }
				 btn2.onclick=function(){
				 	$('#btn').removeClass('btn_onclick');
				 	move(gd,{height:0},function(){
				 		move(wz1,{width:0})
				 	});
				 }
				 
			}
		</script>
	</head>
	<body>
		<div class="dw">
		
			<ul style="position: absolute;right: 0%;bottom:-10px;margin: 0px;padding: 0px;" id="gd">
				<li class="ww"><span style="color: yellow;">天气</span><span style="" class="bg-img wz3" id="btn2"></span></li>
				<ul  class="bg-img wz4" style="display: inline-block;">
					<li>星座</li>
					<li>排行</li>
					<li>热点</li>
					<li>直播</li>
				</ul>
				<li style="padding: 5% 0% 0% 20%;" class="wz5">
					<p>北京</p>
					
					<p>今天（周二）<img src="../js-demo/JS运动中级/土豆右下角菜单悬浮效果/02.gif"/></p>
					<p>-1~10C° 晴 微风小于3级</p>
					<p>今天（周二）<img src="../js-demo/JS运动中级/土豆右下角菜单悬浮效果/02.gif"/></p>
					<p>-1~10C° 晴 微风小于3级</p>
				</li>
				
			</ul>
		<div class="btn" id="btn"></div>
		
		<div class="btn wz1" id="wz1">
			<ul>
				
			
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			</ul>
		<span id="" style="position: absolute;bottom: 0px;color: white;">
			智能课堂
		</span>
		</div>
		</div>
	</body>
</html>
